<template>
  <div class="aabb">
    <div class="left">
      <el-card class="box-card">
        <span>数据统计</span>
        <div class="ul">
          <div class="li">
            <span class="lis">房间总数：<b>5</b></span>
            <span class="lis">居民总数：<b>2</b></span>
            <span class="lis">商店总数：<b>3</b></span>
          </div>
          <div class="li">
            <span class="lis">报修总数出</span>
            <span class="lis">投诉总数次</span>
          </div>
        </div>
      </el-card>
      <el-card class="box-card">
          <span>今日数据变动</span>
          <div class="div">
            <div class="he">新增维修：<b>0</b>处</div>
            <div class="he">新增维修：<b>0</b>处</div>
            <div class="he">新增维修：<b>0</b>处</div>
            <div class="hede">新增维修：<b>0</b>处</div>
          </div>
      </el-card>
      <!-- 折线图 -->
      <div ref="echarts1" class="line-chart">

      </div>
    </div>
    <div class="right">
      <div class="jk">
        <el-card class="box-card">
            <span>待维修处理</span>
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
        </el-card>
        <el-card class="box-card">
            <span>待维修处理</span>
            <div v-for="o in 4" :key="o" class="text item">
              {{'列表内容 ' + o }}
            </div>
        </el-card>
      </div>
    </div>
     
  </div>
</template>

<script>
import { checkLogin } from "../../api/user";
const echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line')   // 引入折线图
// 引入提示框和title组件，图例
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
export default {
  data() {
    return {
    };
  },
  created() {},
  mounted() {
    this.myEcharts1()
    
  },
  methods: {
    myEcharts1() {
      const myChart = echarts.init(this.$refs.echarts1)
      //配置图表
    const option = {
        title: {
          text: "数据展示",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["报修总数", "投诉总数"],
          textStyle: {
            color: "red",
            fontSize: 18,
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["一月", "二月", "三月", "四月", "五月", "六月", "七日"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "投诉总数",
            type: "line",
            stack: "总量",
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "报修总数",
            type: "line",
            stack: "总量",
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      };

      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize()
      }
    },
    async goLogin() {
      const { data } = await checkLogin({ username: "qqq", pass: "qqq" });
      console.log(data);
      this.$store.commit("menu/SET_LIST", data.menu);
      this.$router.push("/index");
    },
  }
}
</script>

<style scoped>
.line-chart {
  height: 500px;
}
.text {
    font-size: 14px;
    margin-top: 10px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 100%;
    margin-top: 18px;
  }
  .aabb{
    display: flex;
  }
  .ul{
    margin-top: 10px;
    width: 100%;
    height: 80px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
  }
  .li{
    margin: 30px;
  }
  .lis{
    margin-right: 30px;
  }
  .div{
    margin-top: 10px;
    width: 1230px;
    height: 80px;
    border: 1px solid #ccc;
    display: flex;
  }
  .he{
    margin: 30px 0 30px 30px;
    padding-right: 30px;
    border-right: 1px solid #ccc;
  }
  .hede{
    margin: 30px;
  }
  .box{
    width: 1230px;
    height: 300px;
    background-color: aqua;
    margin: 10px;
  }
  .jk{
    width: 400px;
    margin-top: 10px;
    margin-left: 30px;
  }
</style>